<template>
  <div class="container">
    <div class="input">
      <input type="text" placeholder="请输入城市名称" v-model.trim="cityName" />
      <router-link to="/search">
        <div v-if="message">{{ message }}</div>
      </router-link>
    </div>
    <div class="search-result">
      <div class="single-result" v-show="!message" v-for="city in cities" :key="city.id">
        <div class="box">
          <div class="item">
            <h3>{{ city.name }}</h3>
            <span>{{ city.temperature }}度</span>
          </div>
          <div class="button">
            <router-link to="/search">
              <button @click="handleCheck(city.name)">查看</button>
            </router-link>
            <button @click="handleDelete(city.id)">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getCode } from '@/api/index.js'
import { debounce } from 'lodash'
import { useWeatherStore } from '@/stores/Weather.js'
const { getCityList, removeCity, checkLocalStorageCityName } = useWeatherStore()

const cityNameStore = useWeatherStore()

const cityName = ref('')
const message = ref('')

const findCity = async () => {
  const code = await getCode(cityName.value)

  if (code.geocodes) {
    message.value = code.geocodes[0].city
    /* cityName.value = ''; */
  } else if (cityName.value === '') {
    message.value = ''
  } else {
    message.value = '似乎没有找到你查找的城市'
    cityName.value = ''
  }
}
watch(
  cityName,
  debounce((newCity) => {
    message.value = ''
    findCity(newCity)
    cityNameStore.cityName = newCity
  }, 500)
)

const cities = ref([])
const handleCheck = (name) => {
  checkLocalStorageCityName(name)
}
const handleDelete = (id) => {
  removeCity(id)
  cities.value = getCityList()
}
onMounted(() => {
  cities.value = getCityList()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  .input {
    div {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #004e71;
      margin: 5px 0;
      padding-left: 5px;
      cursor: pointer;
    }
    input {
      width: 100%;
      height: 40px;
      border: none;
      padding: 5px;
      border-bottom: 1px solid #fff;
      background: transparent;
      color: #fff;
      font-size: 16px;
      outline: none;
      &::placeholder {
        color: #9c9da2;
      }
      &:focus {
        border-bottom: none;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
      }
      &:hover {
        border-bottom: none;
        box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.6);
      }
    }
  }
  .search-result {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 170px;
    overflow-y: auto;
    .single-result {
      .box {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        &:hover {
          .item {
            flex: 0.9;
          }
          .button {
            display: flex;
          }
        }
        .item {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          background: #004e71;
          transition: flex 0.4s ease-in-out;
          cursor: pointer;
          h3,
          span {
            background: #004e71;
          }
        }
        .button {
          display: none;
          button {
            text-align: center;
            width: 80px;
            height: 45px;
            background: #eab308;
            border: none;
            font-size: 16px;
            cursor: pointer;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
